<script setup lang="ts">
import {
DataField,
Field as FieldType
} from '@formily/core';
import { Select } from '@formily/element-plus';
import { Field, useField } from '@formily/vue';
import { usePrefix } from '@season-designable/vue';
import { ref } from 'vue';
import ColorInput from '../ColorInput/index.vue';
import FoldItem from '../FoldItem/index.vue';
import PositionInput from '../PositionInput/index.vue';
import SizeInput from '../SizeInput/SizeInput.vue';

const field = useField<DataField>();
const prefix = usePrefix('border-style-setter');

// const emit = defineEmits(['change']);
// const props = defineProps(['value']);
const Positions = ['center', 'top', 'right', 'bottom', 'left'];

const createBorderProp = (position: string, key: string) => {
  const insert = position === 'center' ? '' : `-${position}`;
  return `border${insert}-${key}`;
};

const parseInitPosition = (field: FieldType) => {
  const basePath = field.address.parent();
  for (let i = 0; i < Positions.length; i++) {
    const position = Positions[i];
    const stylePath = `${basePath}.${createBorderProp(position, 'style')}`;
    const widthPath = `${basePath}.${createBorderProp(position, 'width')}`;
    const colorPath = `${basePath}.${createBorderProp(position, 'color')}`;
    if (
      field.query(stylePath).value() ||
      field.query(widthPath).value() ||
      field.query(colorPath).value()
    ) {
      return position;
    }
  }
  return 'center';
};

const currentPosition = ref(parseInitPosition(field.value));

// const createReaction = (position: string) => (field: FieldType) => {
//   field.display = currentPosition.value === position ? 'visible' : 'hidden';
//   if (position !== 'center') {
//     const borderStyle = field.query('.borderStyle').value();
//     const borderWidth = field.query('.borderWidth').value();
//     const borderColor = field.query('.borderColor').value();
//     if (borderStyle || borderWidth || borderColor) {
//       field.value = undefined;
//     }
//   }
// };

const onPositionChange = (value: string) => {
  currentPosition.value = value;
};

const BorderStyleOptions = [
  {
    label: 'None',
    value: 'none',
  },
  {
    label: 'solid',
    value: 'solid',
  },
  {
    label: 'dashed',
    value: 'dashed',
  },
  {
    label: 'dotted',
    value: 'dotted',
  },
];
</script>

<template>
  <FoldItem :label="field.title">
    <template #extra>
      <div :class="prefix">
        <div :class="prefix + '-position'">
          <PositionInput :value="currentPosition" @change="onPositionChange" />
        </div>

        <div :class="prefix + '-input'">
          <template v-for="position in Positions" :key="position">
            <template v-if="position === currentPosition">
              <Field
                :name="createBorderProp(position, 'style')"
                :basePath="field.address.parent()"
                :dataSource="BorderStyleOptions"
                :component="[Select, { placeholder: 'Please Select' }]"
              />

              <Field
                :name="createBorderProp(position, 'width')"
                :basePath="field.address.parent()"
                :component="[SizeInput, { exclude: ['auto'] }]"
              />

              <Field
                :name="createBorderProp(position, 'color')"
                :basePath="field.address.parent()"
                :component="[ColorInput]"
              />
            </template>
          </template>
        </div>
      </div>
    </template>
  </FoldItem>
</template>

<style lang="scss" scoped>
.dn-border-style-setter {
  display: flex;
  &-position {
    margin-left: -10px;
  }
  &-input {
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}

.border-style-solid-line {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;

  &::after {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    content: '';
    height: 0;
    width: 100%;
    border-top: 2px solid currentColor;
    transform: translateY(-50%);
  }
}

.border-style-dashed-line {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;

  &::after {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    content: '';
    height: 0;
    width: 100%;
    border-top: 2px dashed currentColor;
    transform: translateY(-50%);
  }
}

.border-style-dotted-line {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;

  &::after {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    content: '';
    height: 0;
    width: 100%;
    border-top: 2px dotted currentColor;
    transform: translateY(-50%);
  }
}
</style>
